<template>
	<view class="page">
		<view class="container">
			<view style="font-size: 36rpx;margin-bottom: 50rpx;">当前项目信息</view>

			<uni-forms :modelValue="baseFormData" :rules="rules">
				<uni-forms-item label="项目名称:" name="project" required>

					<uni-data-select v-model="baseFormData.projectID" style="width: 200rpx;" :localdata="projectList" @change="change"
					label="选择项目"></uni-data-select>
					
					<!-- <picker mode="selector"  :range="projectNameArr" :value="projectIndex"  @change="bindPickerChange">
						<view class="uni-input">{{projectArr[projectIndex].projectName }}</view>
					</picker> -->
				</uni-forms-item>

				<uni-forms-item label="所属公司:" name="project" required>
					<uni-data-select v-model="baseFormData.companyID" style="width: 200rpx;" :localdata="companyList" @change="bindPickerCompanyChange"
					label="选择公司"></uni-data-select>
							<!-- <picker mode="selector" :range="companyNameArr" :value="companyIndex"   @change="bindPickerCompanyChange">
								<view class="uni-input">{{companyArr[companyIndex].companyName }}</view>
							</picker> -->
				</uni-forms-item>

				<uni-forms-item label="所属班组:" name="project" required>
					<uni-data-select v-model="baseFormData.goupID" style="width: 200rpx;" :localdata="groupList" @change="bindPickerManageChange"
					label="选择班组"></uni-data-select>
					<!-- <picker mode="selector" :range="companyNameArr" :value="companyIndex"   @change="bindPickerCompanyChange">
						<view class="uni-input">{{companyArr[companyIndex].companyName }}</view>
					</picker> -->
					
				</uni-forms-item>

				<uni-forms-item  label="工种:" name="project" required>
					
					<uni-data-select v-model="baseFormData.workTypeId" style="width: 200rpx;" :localdata="workTypeList" @change="bindPickerWorkChange"
					label="选择工种"></uni-data-select>
					<!-- <picker v-model="baseFormData.workTypeId" mode="selector" :range="workNameArr" :value="workIndex"   @change="bindPickerWorkChange">
						<view class="uni-input">{{workArr[workIndex].name }}</view>
					</picker> -->
					
				</uni-forms-item>

				<view class="d-flex mt-20">
					<view style="width: 180rpx;">
						工人类型：
					</view>

					<uni-data-checkbox v-model="baseFormData.workerType" :localdata="workerTypes" />
				</view>

				<view class="d-flex mt-40">
					<view style="width: 180rpx;">
						是否有合同：
					</view>

					<uni-data-checkbox v-model="baseFormData.isGroupPrincipal" :localdata="isGroupPrincipal" />
				</view>

				<view class="d-flex mt-40">
					<view style="width: 180rpx;">
						附件：
					</view>
					<!-- 有合同展示 -->
					<!-- <view style="color: #007AFF;" @click="previewFile">
						合同附件
					</view> -->
					<!-- 无合同展示 -->
					<view class="upload-btn" type="default" size="mini">
						<uni-icons type="upload" size="20" color="#333"></uni-icons>
						上传合同附件 
						<uni-file-picker class="group-info_upload"  limit="1" @select="selectPrincipal"
							@progress="progress" @success="success" @fail="fail">
						</uni-file-picker>
						
					</view>

				</view>
				<view class="image" v-if="fileFlag != 0" >
					<image :src="baseFormData.fileUrl" mode="aspectFill"></image>
				</view>
				<view class="mt-10" style="margin-left: 180rpx;font-size: 24rpx;color: #666;">支持扩展名：.rar .zip .doc .docx
					.pdf .jpg...
				</view>

				<view class="d-flex mt-40">
					<view style="width: 180rpx;">
						有重大病史：
					</view>

					<uni-data-checkbox v-model="baseFormData.isSick" :localdata="isSick" />
				</view>

				<view class="mt-40">
					<uni-forms-item label="手机号码:" name="phone" required>
						<uni-easyinput v-model="baseFormData.phone" placeholder="输入手机号码" />
					</uni-forms-item>
				</view>

				<view class="d-flex">
					<view style="width: 180rpx;">
						本人照片：
					</view>

					<view class="upload-photos">
						<uni-icons type="camera" size="50" color="#333"></uni-icons>

						<uni-file-picker class="group-info_upload" :imageStyles="imageStyles1" limit="1"
							@select="select" @progress="progress" @success="success" @fail="fail">
						</uni-file-picker>
					</view>
				</view>
				<view class="image" v-if="headFlag != 0" >
					<image :src="baseFormData.headUrl" mode="aspectFill"></image>
				</view>
			</uni-forms>
		</view>

		<!-- 成功提示窗 -->
		<uni-popup ref="successDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="" confirmText="确定" title="提示" content="已添加"
				@confirm="goHomePage">
			</uni-popup-dialog>
		</uni-popup>

		<button class="submit mt-20" type="primary" @click="onSubmit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义上传样式
				imageStyles: {
					width: 125,
					height: 30,
				},
				imageStyles1: {
					width: 80,
					height: 80,
				},
				baseFormData: {
					nationality: "",
					project: "",
					workerType:"",
					fileUrl : "",
					headUrl : "",
					workTypeId: "",
					isGroupPrincipal: "",
					isSick : "",
				},
				rules: {

				},
				// 所属项目
				projects: ['中国', '美国', '巴西', '日本'],
				groupArr:[{"groupName":""}],
				groupNameArr:[""],
				projectArr:[],
				companyArr:[],
				companyNameArr:[],
				projectNameArr:[],
				workNameArr:[],
				workArr:[],
				manageArr:[],
				projectId:0,
				companyIndex:0,
				projectIndex:0,
				groupIndex:0,
				workIndex:0,
				//
				headFlag:0,
				fileFlag:0,
				projectList:[],
				companyList:[],
				groupList:[],
				workTypeList:[],
				// 工种类型
				workerTypes: [{
					text: '班组长',
					value: 0
				}, {
					text: '普通工人',
					value: 1
				}],
				isSick: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}],
				// 是否班组长
				isGroupPrincipal: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}],
			}
		},
		methods: {
			/// 返回首页
			goHomePage() {
				console.log("返回首页")
				uni.reLaunch({
					url: "/pages/grid/grid"
				});
			},
			onSubmit() {
				let ss = this.baseFormData
				debugger
				if(this.baseFormData.projectID == ''){
					uni.showModal({content: "请选择项目"});	
				}else if(this.baseFormData.companyID == ''){
					uni.showModal({content: "请选择公司"});	
				}else if(this.baseFormData.goupID == ''){
					uni.showModal({content: "请选择班组"});	
				}else if(this.baseFormData.workTypeId == null){
					uni.showModal({content: "请选择工人类型"});	
				}else if(this.baseFormData.isGroupPrincipal == null){
					uni.showModal({content: "请选择合同类型"});	
				}else if(this.baseFormData.isSick == null){
					uni.showModal({content: "请选择健康类型"});	
				}else if(this.baseFormData.phone == ''){
					uni.showModal({content: "请输入手机号码"});	
				}else {
					this.baseFormData.certificateType = 1
					const that = this
					if( that.baseFormData.headImgId  != null ){
						uni.request({
							url: 'http://116.205.142.103:8808/labor/system/user/checkPhone?phone=' + this.baseFormData.phone,
						    method: 'get',
							success: res => {
								if(res.data.data == 0){
									uni.request({
										url: 'http://116.205.142.103:8808/labor/system/user/appInsertUser',
									    method: 'POST',
										data: that.baseFormData,
										success: res => {
											that.$refs.successDialog.open();
										}
									});
								}else{
									uni.showModal({
										content: "手机号码已存在",
										showCancel: false
									});	
								}
							}
						});
					}else {
						uni.showModal({
							content: "本人照片未提交",
							showCancel: false
						});	
					}	
				}
				
					
			},
			selectProjects(res) {
				console.log("选择项目", res);
			},
			onLoad(options) {
				this.baseFormData = JSON.parse(options.baseFormData)
				this.baseFormData.headImgId =null
							uni.request({
									url: 'http://116.205.142.103:8808/labor/system/user/getProject',
								    method: 'get',
									success: res => {
										this.projectArr = res.data.data
										this.projectArr.forEach(item =>{
											this.projectNameArr.push(item.projectName)
											this.projectList.push({value:item.projectId , text: item.projectName})
										})
										
									}
								});
								uni.request({
									url: 'http://116.205.142.103:8808/labor/system/user/getWorkType',
								    method: 'get',
									success: res => {
										this.workArr = res.data.data
										this.workArr.forEach(item =>{
											this.workNameArr.push(item.name)
											this.workTypeList.push({value:item.id , text: item.name})
										})
									}
								});
								uni.request({
								    url: 'http://116.205.142.103:8808/labor/system/user/getCompany',
									method: 'get',
									success: res => {
										this.companyArr = res.data.data
										this.companyArr.forEach(item =>{
											this.companyNameArr.push(item.companyName)
											this.companyList.push({value:item.id , text: item.companyName})
										})
									}
								});
								uni.request({
									url: 'http://116.205.142.103:8808/labor/system/user/getGroupName',
								 	method: 'get',
								 	success: res => {
										this.groupArr = res.data.data
										this.groupArr.forEach( item => {
											this.groupNameArr.push(item.groupName)
											this.groupList.push({value:item.id , text: item.companyName})
										})
								 	}
								 })
								let flag = options.flag
								if(flag == 1) {
									uni.request({
										url: 'http://116.205.142.103:8808/labor/system/user/findUserById?ID=' + options.ID,
									 	method: 'get',
									// 	responseType: 'arraybuffer',
									 	success: res => {
											this.baseFormData = res.data.data
											this.projectId = res.data.data.projectId
											this.loadGroup(this.baseFormData.companyID)
											this.imageValue = [{
												url: 'http://116.205.142.103:' + this.baseFormData.filePath +  this.baseFormData.fileName,
												extname: 'png',
												name:  this.baseFormData.fileName
											}]
									 	}
									 })
								}
								uni.setNavigationBarTitle({
									title: "员工登记"
								})
							},
							bindPickerWorkChange(e) {
								this.workIndex = e.detail.value
								this.baseFormData.workTypeId = this.workArr[this.workIndex].id;
							},
							bindPickerManageChange(e) {
								this.groupIndex = e.detail.value
								this.baseFormData.groupID = this.groupArr[this.groupIndex].projectId;
							},
							bindPickerCompanyChange(e) {
								 
								debugger
								this.loadGroup(this.baseFormData.companyID)
								
							},
							bindPickerChange(e) {
								this.projectIndex = e.detail.value
								this.baseFormData.projectID = this.projectArr[this.projectIndex].projectId;
							},
			// 查看附件
			previewFile() {
				uni.showLoading({
					mask: true,
				});
				uni.downloadFile({
					url: 'https://img-blog.csdnimg.cn/20210906153958594.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.hideLoading();
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log("打开文档成功");
								},
							});
						}
					},
				});
			},
			loadGroup(id){
				const then = this
				uni.request({
					url: 'http://116.205.142.103:8808/labor/system/user/getGroupName?companyId=' + id,
				 	method: 'get',
				 	success: res => {
						then.groupArr = res.data.data
						then.groupArr.forEach( item => {
							this.groupList.push({value:item.id , text: item.groupName})
						})
				 	}
				 })
			},
			// 获取上传状态
			select(e) {
				const that = this
				uni.uploadFile({
					url: 'http://116.205.142.103:8808/labor/system/user/appUpload', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: this.baseFormData,
					success: (res) => {
						let resData = JSON.parse(res.data).data;
						that.baseFormData.headImgId = resData.id;
						that.baseFormData.headPath = resData.savePath 
						that.baseFormData.headName = resData.fileName
						that.baseFormData.headUrl = 'http://116.205.142.103:' + this.baseFormData.headPath + this.baseFormData.headName
						that.headFlag = 1
						console.log(that.baseFormData)
					}
				});
			},
			selectPrincipal(e) {
				uni.uploadFile({
					url: 'http://116.205.142.103:8808/labor/system/user/appUpload', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						let resData = JSON.parse(res.data).data;
						this.baseFormData.contractFileId = resData.id;
						this.baseFormData.filePath = resData.savePath 
						this.baseFormData.fileName = resData.fileName
						this.baseFormData.fileUrl = 'http://116.205.142.103:' + this.baseFormData.filePath + this.baseFormData.fileName
						this.fileFlag = 1
						console.log(this.baseFormData.fileUrl)
						console.log("====================")
					}
				});
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 30rpx 100rpx;
		background-color: #f7f7f7;
	}

	.container {
		padding-top: 50rpx;
	}

	.d-flex {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.mt-40 {
		margin-top: 40rpx;
	}

	.upload-btn {
		width: 250rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1rpx solid #CCCCCC;
	}

	.group-info_upload {
		padding: 10rpx;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		// background-color: red;
	}

	.upload-photos {
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		overflow: hidden;
		position: relative;
		// background-color: red;
	}
</style>
